<template>

    <div class="fieldHeader">范围权限设置</div>
        <div>
            <div v-for="(dataScope, index) in dataScopeData" :key="index" style="margin-bottom: 10px;">
                
                <div>
                    {{dataScopeData[index].name}}
                    <el-button type="primary" @click="submitScope(index)">确定</el-button>
                </div>
                <el-checkbox v-model="dataScopeData[index].selfAccess" label="应用到编辑者" size="large" />
                <el-checkbox v-model="dataScopeData[index].sameLevelAccess" label="应用到同级" size="large" />
                <el-checkbox v-model="dataScopeData[index].upLevelAccess" label="应用到上级" size="large" />
            </div>
        </div>

        <div class="fieldHeader">字段权限设置</div>

        <el-row :gutter="20" style="margin-left: 10px;">
            <el-select v-model="formField"  placeholder="字段" size="large">
                <el-option
                v-for="item in ruleShowData"
                :key="item.id"
                :label="item.showName"
                :value="item.fieldName"
                />
            </el-select>
            <el-input class="inputClass" v-model="formExpress" placeholder="匹配表达式" />
            <el-input class="inputClass" v-model="formExpressResult" placeholder="匹配表达式结果" />

            <div style="margin-left: 10px;">
                <el-checkbox v-model="formCheckBox[0]" label="应用到编辑者" size="large" />
                <el-checkbox v-model="formCheckBox[1]" label="应用到同级" size="large" />
                <el-checkbox v-model="formCheckBox[2]" label="应用到上级" size="large" />
            </div>
            <div style="margin:10px">
                <el-button type="primary" @click="addRule">添加</el-button>
                <el-button type="primary" @click="updateRule">修改</el-button>
            </div>
        </el-row>

        <div>
            <el-table :data="ruleData" @row-click="ruleRowClick">
                <el-table-column prop="id" label="Id"/>
                <el-table-column  label="字段名">
                    <template #default="scope">
                        {{ ruleShowMapping[scope.row.fieldName] }}
                    </template>
                </el-table-column>
                <el-table-column label="匹配类型" width="150">
                    <template #default="scope">
                        表达式
                    </template>
                </el-table-column>
                <el-table-column prop="express" label="匹配表达式" width="150"/>
                <el-table-column prop="expressResult" label="表达式结果" />
                <el-table-column prop="selfApply" label="应用到编辑者" />
                <el-table-column prop="sameLevelApply" label="应用到同级" />
                <el-table-column prop="upLevelApply" label="应用到上级" />
            </el-table>
        </div>


        <div class="fieldHeader">客户数据</div>
        <el-row :gutter="20" style="margin-left: 10px;">
            <el-input class="inputClass" v-model="username" placeholder="用户名" />
            <el-input class="inputClass" v-model="phone" placeholder="投诉内容" />
            <div style="margin-left: 20px; margin-right: 100px;">
                <el-button type="primary" @click="addCustom">添加客户</el-button>
                <el-button type="primary" @click="updateCustom">修改客户</el-button>
            </div>

            <!-- <el-input class="inputClass" v-model="formAssign" :placeholder="`${curCustom == null?'': curCustom.name}分配给指定员工`" />
            <div style="margin-left:10px">
                <el-button type="primary" @click="assignCustom">分配客户</el-button>
            </div> -->
        </el-row>
    <div>
        <el-table :data="customData" @row-click="rowClick">
            <el-table-column prop="id" label="Id" width="180" />
            <el-table-column prop="uname" label="用户名" width="180" />
            <el-table-column prop="content" label="投诉内容" />
            <el-table-column prop="optUid" label="被投诉员工" />
        </el-table>
    </div>

</template>

<script setup>

import { ref, onMounted } from 'vue'
import httpRequest from '@/request/index'

const dataScopeData = ref([])
const ruleData = ref([])
const ruleShowData = ref([])
const ruleShowMapping = ref({})

const formField = ref()
const formExpress = ref('')
const formExpressResult = ref('')
const formCheckBox = ref([true, true, false])
const formAssign = ref()
const curFieldShow = ref()

const username = ref('')
const phone = ref('')
const curCustom = ref()

const customData = ref([])

function addRule() {
    httpRequest({
        url: '/auth/data_acl/rule/add',
        method: 'post',
        data: {
            fieldName: formField.value,
            matchType: 1,
            express: formExpress.value,
            expressResult: formExpressResult.value,
            selfApply: formCheckBox.value[0],
            sameLevelApply: formCheckBox.value[1],
            upLevelApply: formCheckBox.value[2],
            aclId: 54
        }
    }).then((res) => {
        if (res.code === 0) {
            loadRuleData()
            getCustomList()
        }
    }) 
}

function updateRule() {
    httpRequest({
        url: '/auth/data_acl/rule/update',
        method: 'post',
        data: {
            id: curFieldShow.value.id,
            fieldName: formField.value,
            matchType: 1,
            express: formExpress.value,
            expressResult: formExpressResult.value,
            selfApply: formCheckBox.value[0],
            sameLevelApply: formCheckBox.value[1],
            upLevelApply: formCheckBox.value[2]
        }
    }).then((res) => {
        if (res.code === 0) {
            loadRuleData()
            getCustomList()
        }
    }) 
}


function submitScope(index) {

    httpRequest({
        url: '/auth/data_acl/scope',
        method: 'post',
        data: {
            aclId: dataScopeData.value[index].aclId,
            selfAccess: dataScopeData.value[index].selfAccess,
            sameLevelAccess: dataScopeData.value[index].sameLevelAccess,
            upLevelAccess: dataScopeData.value[index].upLevelAccess
        }
    }).then((res) => {
        if (res.code === 0) {
            loadDataScopeData()
            getCustomList()
        }
    }) 

}



function loadRuleData() {
    httpRequest({
        url: '/auth/data_acl/rule?aclId=54',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            ruleData.value = res.data
        }
    }) 
}


function loadRuleShowData() {
    httpRequest({
        url: '/auth/data_acl/rule/show?aclId=54',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            ruleShowData.value = res.data

            for (let i = 0; i < res.data.length; i++) {
                ruleShowMapping.value[res.data[i].fieldName] = res.data[i].showName 
            }

        }
    })
}


function loadDataScopeData() {
    httpRequest({
        url: '/auth/data_acl/scope?modelId=53',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            dataScopeData.value = res.data
        }
    }) 
}


function assignCustom() {
    httpRequest({
        url: '/custom/assign',
        method: 'post',
        data: {
            id: curCustom.value.id,
            optUid: formAssign.value
        }
    }).then((res) => {
        if (res.code === 0) {
            getCustomList();
        }
    })
}

function addCustom() {
    httpRequest({
        url: '/custom/add',
        method: 'post',
        data: {
            name: username.value,
            phone: phone.value
        }
    }).then((res) => {
        if (res.code === 0) {
            getCustomList();
        }
    })
}

function ruleRowClick(row) {
    formField.value = row.fieldName
    formExpress.value = row.express
    formExpressResult.value = row.expressResult
    formCheckBox.value = [row.selfApply, row.sameLevelApply, row.upLevelApply]
    curFieldShow.value = row
}

function rowClick(row) {
    username.value = row.uname
    phone.value = row.content
    curCustom.value = row
}

function updateCustom() {
    httpRequest({
        url: '/logistics/content/update',
        method: 'post',
        data: {
            id: curCustom.value.id,
            uname: username.value,
            content: phone.value
        }
    }).then((res) => {
        if (res.code === 0) {
            getCustomList();
        }
    })
}

function getCustomList() {
    httpRequest({
        url: '/logistics/content/list',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            customData.value = res.data
        }
    })
}

onMounted(() => {
    getCustomList()
    loadDataScopeData()
    loadRuleData()
    loadRuleShowData()
})
</script>

<style scoped>
.fieldHeader {
    font-size: large;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
}

.inputClass {
    width: 200px;
}
</style>